<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title th:text="${session.title}">123</title>
    <link th:replace="common/header"/>
    <script type="text/javascript" th:src="@{/js/layer/main.js}"></script>
    <script th:src="@{/js/placeholder_plus.js}"></script>
    <link th:replace="common/tip"/>
    <script type="text/javascript">
        $(document).ready(function () {
            reloadVerifyCode($("#yzmImage")[0]);
        });

        function sub() {
            var pass1 = $("#password").val();
            var pass2 = $("#pwd").val();
            var agree = $("#agree").is(':checked');
            var email = $("#email").val();

            if (pass1 !== pass2) {
                $("#pwderr").text("两次输入密码不一致，请检查！");
                $("#ok").hide();
                return false;
            }

            if (email === null || email === "") {
                $("#emailerr").text("邮箱不能为空！");
                return false;
            } else {
                checkEmail(email);
            }

            if (pass1 === pass2 && agree) {
                $("#ok").show();
            }
        }

        function checkEmail(email) {
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/checkEmail",
                data: "email=" + email,
                success: function (data) {
                    if (data.msg !== 'ok') {
                        $("#emailerr").text("邮箱已经存在，请更改！");
                        return false;
                    } else {
                        $("#emailerr").text("");
                        return true;
                    }
                }
            });
        }
    </script>
</head>
<body class="login-layout">
<div class="container-fluid" id="main-container">
    <div id="main-content">
        <div class="row-fluid">
            <div class="span12">
                <div class="login-container">
                    <div class="row-fluid">
                        <div class="center">
                            <h1><img th:src="@{/images/logo2.png}" src="" alt=""/> <span class="blue"
                                                                                         th:text="${session.title}">123</span>
                            </h1>
                            <h4 class="green" th:text="${'&copy;' + session.title}">123</h4>
                        </div>
                    </div>
                    <div class="space-6"></div>
                    <div class="row-fluid">
                        <div class="position-relative">
                            <div id="signup-box" class="visible widget-box no-border">
                                <div class="widget-body">
                                    <div class="widget-main">
                                        <h4 class="header green lighter bigger"><em class="icon-group blue"></em>新用户注册
                                        </h4>
                                        <div class="space-6"></div>
                                        <form th:object="${footUser}" method="post" th:action="@{/regist}" name="form">
                                            <input type="hidden" name="id" id="id" th:field="*{id}"/>
                                            <fieldset>
                                                <label> <span class="block input-icon input-icon-right"> <input
                                                        th:field="*{name}" type="text" name="name" class="span12"
                                                        placeholder="用户名"/> <em class="icon-user"></em> </span> <span
                                                        style="color:red" th:if="${#fields.hasErrors('name')}"
                                                        th:errors="*{name}">Name Error</span> </label>
                                                <label> <span class="block input-icon input-icon-right"> <input
                                                        th:field="*{nike}" type="text" name="nike" class="span12"
                                                        placeholder="昵称"/> <em class="icon-user"></em> </span> <span
                                                        style="color:red" th:if="${#fields.hasErrors('nike')}"
                                                        th:errors="*{nike}">Name Error</span> </label>
                                                <label> <span class="block input-icon input-icon-right"> <input
                                                        th:field="*{gameId}" type="text" name="gameId" class="span12"
                                                        placeholder="游戏ID"/> <em class="icon-user"></em> </span> <span
                                                        style="color:red" th:if="${#fields.hasErrors('gameId')}"
                                                        th:errors="*{gameId}">Name Error</span> </label>
                                                <label> <span class="block input-icon input-icon-right"> <input
                                                        th:field="*{password}" type="password" name="password"
                                                        id="password" class="span12" placeholder="密码"/> <em
                                                        class="icon-lock"></em> </span> <span style="color:red"
                                                                                              th:if="${#fields.hasErrors('password')}"
                                                                                              th:errors="*{password}">Name Error</span>
                                                </label>
                                                <label> <span class="block input-icon input-icon-right"> <input
                                                        th:field="*{pwd}" type="password" class="span12" name="pwd"
                                                        id="pwd" placeholder="重复输入密码" onblur="sub();"/> <em
                                                        class="icon-retweet"></em> </span> <span style="color:red"
                                                                                                 id="pwderr"><span
                                                        th:if="${#fields.hasErrors('pwd')}" th:errors="*{pwd}">Name Error</span></span>
                                                </label>
                                                <label> <span class="block input-icon input-icon-right"> <input
                                                        th:field="*{email}" type="text" name="email" id="email"
                                                        class="span12" placeholder="电子邮箱"
                                                        onblur="checkEmail(this.value);"/> <em
                                                        class="icon-envelope"></em> </span> <span style="color:red"
                                                                                                  id="emailerr"><span
                                                        th:if="${#fields.hasErrors('email')}" th:errors="*{email}">Name Error</span></span>
                                                </label>
                                                <span style="color:#ccc;">请选择喜欢的俱乐部：</span>
                                                <label> <span class="block input-icon input-icon-right"> <select
                                                        th:field="*{qdId}" name="qdId" id="qdId" class="input_fix"> <option
                                                        th:each="t:${qdList}" th:text="${t.qdmc}"
                                                        th:value="${t.id}">123</option> </select> </span> <span
                                                        style="color:red" th:if="${#fields.hasErrors('qdId')}"
                                                        th:errors="*{qdId}">Name Error</span> </label>
                                                <label> <span class="block input-icon input-icon-right"> <input
                                                        type="text" name="yzm" class="span8" placeholder="验证码"/> <img
                                                        alt="看不清楚，换一张" id="yzmImage" src=""
                                                        th:onclick="'javascript:reloadVerifyCode(this)'"
                                                        style="cursor: hand;"/> <script type="text/javascript">
															             	function reloadVerifyCode(obj) {
                                                                                obj.src = "/verifyCode?" + Math.random();
                                                                            }
															            </script> </span> <span style="color:red"
                                                                                                th:if="${#fields.hasErrors('yzm')}"
                                                                                                th:errors="*{yzm}">Name Error</span>
                                                </label>
                                                <label> <input type="checkbox" id="agree" onclick="sub();"/> <span
                                                        class="lbl"> 我接收 <a href="#"
                                                                            th:onclick="'javascript:showUserItem()'">用户协议</a> </span>
                                                </label>
                                                <div class="space-24"></div>
                                                <div class="row-fluid">
                                                    <button type="reset" class="span6 btn btn-small"><em
                                                            class="icon-refresh"></em>重置
                                                    </button>
                                                    <button type="submit" id="ok" style="display:none;"
                                                            class="span6 btn btn-small btn-success"> 注册<em
                                                            class="icon-arrow-right icon-on-right"></em></button>
                                                </div>
                                            </fieldset>
                                        </form>
                                    </div>
                                    <div class="toolbar center">
                                        <a th:href="@{/login}" class="back-to-login-link"> <em
                                                class="icon-arrow-left"></em> 返回登录 </a>
                                    </div>
                                </div>
                                <!--/widget-body-->
                            </div>
                            <!--/signup-box-->
                        </div>
                        <!--/position-relative-->
                    </div>
                </div>
            </div>
            <!--/span-->
        </div>
        <!--/row-->
    </div>
</div>
<!--/.fluid-container-->
<!--basic scripts-->
<div th:replace="common/jsList"></div>
</body>
</html>